<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="hander">
			<view class="" style="width: 100%; height: 100rpx;">
				<!-- <TopTabs :list="list" @changeTab="changeTab" :top="mt"></TopTabs> -->
				<u-tabs :list="list" @click="changeTab" itemStyle="width:50%;padding:22rpx 0;;background:#fff"
					lineWidth="64" lineHeight="4" :current="current"></u-tabs>
			</view>
		</view>
		<view class="content-list" v-if="yfzxact == 0">
			<view class="left">
				<u-swipe-action v-if="List.length !== 0">
					<u-swipe-action-item :options="options" @click.stop="del(item)" :ref="'swipeAction' + index"
						v-for="item, index in List" :key="index">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content">
								<view class="card" @click.prevent="onTap(item)">
									<view class="image">
										<image class="image" :src="item.picList[0]" mode=""></image>
										<text class="text" v-show="item.state == 0">审核未通过</text>
										<text class="text" v-show="item.state == 1">审核通过</text>
										<text class="text" v-show="item.state == 2">待人工审核</text>
									</view>
									<view class="left-text">
										<view class="title">
											{{ item.title }}
										</view>
										<view class="icon">
											<!-- 点赞 -->
											<view class="box" @click.stop="like(item)">
												<u-icon name="thumb-up" size="50rpx"
													:cllor="likeShow == true ? '#1bd0f4' : ''"></u-icon>
												<u-badge :type="type" max="99"
													:value="item.likeNum == 0 ? '0' : item.likeNum"></u-badge>
											</view>
											<!-- 评论 -->
											<view class="box">
												<u-icon name="chat" size="50rpx"
													:cllor="commentShow == true ? '#1bd0f4' : ''"></u-icon>
												<u-badge :type="type" max="99"
													:value="item.commentNum == 0 ? '0' : item.commentNum"></u-badge>
											</view>
											<!-- 收藏 -->
											<view class="box" @click.stop="care(item)">
												<u-icon name="star" size="50rpx"
													:cllor="careShow == true ? '#1bd0f4' : ''"></u-icon>
												<u-badge :type="type" max="99"
													:value="item.careNum == 0 ? '0' : item.careNum"></u-badge>
											</view>
										</view>

									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>

				<view class="content" v-else>
					<view>
						<!-- <image class="image"
							src="https://i.ringzle.com/file/20240305/512da22e88aa44b7a61f379dfb8b0b19.png" mode="">
						</image> -->
						<image class="no_img"
							src="https://i.ringzle.com/file/20240104/a41e61c5857c446c8f6c63aa12008681.png">
						</image>

						<view class="share">
							暂未发布，赶快发布吧
						</view>
						<!-- 		<image class="image-two" @click="publishStrategy"
							src="https://i.ringzle.com/file/20231114/42051b4291144a72adce51d93b264860.png" mode="">
						</image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="content-list" v-if="yfzxact == 1">
			<!-- <c-nav-bar :title="titleHeader" ></c-nav-bar> -->
			<view class="pop-center">
				<view v-for="(item, index) in searchList" :key="index" class="comments">
					<view class="one-list" @longpress='TapAndHold(item, index)'>
						<view class="image">
							<!-- <image src="@/static/my/avatar.png" mode="aspectFill"></image> -->
							<image :src="item.headUrl" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view @click="TapComments(item, index)">
								<view class="center-title">
									{{ item.commentatorName }}
								</view>
								<view class="center-time">
									<!-- 回复了你的{{commentsType}} {{item.createDate}} -->
									回复了你的评论 {{ item.createDate }}
								</view>
								<view class="center-text">
									{{ item.content }}
								</view>
								<view class="center-text1">
									<text class="text"></text> {{ item.myComment }}
								</view>
							</view>
							<view class="center-Reply" @tap="discussChildren(item, index)">
								<view>
									<u-icon name="chat"></u-icon>
									回复
								</view>
							</view>
						</view>
					</view>

				</view>

				<!-- 评论删除回复弹出框 -->
				<u-popup :show="show" @close="close" :round="24" @open="open">
					<view class="pop">
						<view class="two" style="color: #FF4141;" @click="deled">
							删除
						</view>
						<view class="three" @click="show = false">
							取消
						</view>
					</view>
				</u-popup>
			</view>
			<view class="pop-input-if " v-if="commit">
				<input-box :commit="commit" border="none" @submit="submit" @blur="submit"></input-box>
			</view>
			<nodata v-if="searchList.length === 0"></nodata>
			<!-- 授权手机登录 -->
			<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		</view>

		<view class="btns" v-if="yfzxact == 0">
			<view class="" @click="publishStrategy"
				style="color:#fff ; border-color: #007A69; background-color: #007A69;">
				发布攻略
			</view>
		</view>
	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index1.vue'
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import inputBox from '@/compoments/inputBox/inputBox1.vue'
	import TopTabs from '@/compoments/TopTabs/topTabs.vue';
	export default {
		components: {
			TopTabs,
			GetPhoneNumber,
			nodata,
			inputBox
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '我的发布',
				list: [{
						name: '旅游攻略'
					}, {
						name: '我的评论'
					},
					// {
					// 	name: '小工市场'
					// }, 
				],
				yfzxact: 0,
				List: [],
				likenum: 0,
				commentnum: 0,
				carenum: 0,
				introdutionId: '',
				fromData: {
					type: 5,
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				current: 0,
				// titleHeader: '我的评论',
				searchList: [],
				commit: false,
				show: false,
				fromData: {
					limit: 9999,
					page: 1,
					type: '',
					userId: JSON.parse(uni.getStorageSync('userInfo')).id
				},
				dto: {
					commentPid: null,
					commentatorId: 0,
					commentatorName: "",
					content: "",
					count: 0,
					createDate: "",
					creator: 0,
					id: 0,
					num: 0,
					pid: 0,
					tripId: 0,
					updateDate: "",
					updater: null,
					pname: null,
					type: null,
					commId: null,
					revieweeId: null
				},
				showValues: false,
				values: '',
				commentsType: ''
			}
		},
		onShow() {
			this.getList()

			this.getListed()
			this.$login().then(res => {
				if (res !== 0) {
					this.$refs['phoneNumber'].show = true;
				}
			})
		},
		methods: {
			// 收藏
			care(item) {
				let list = {
					id: item.id,
					type: item.publisherType
				}
				this.$api.get('/api/introdution/Care', list)
					.then(res => {
						// console.log('// 收藏carenum', res)
						this.getList(this.id)
						this.$showToast(res.data.data)
					})
			},
			// 评论
			comment(val) {
				this.dto.content = val
				if (val !== '') {
					this.$api.post('/api/introdution/comment', this.dto)
						.then(res => {
							// console.log('评论commentnum', res)
							this.values = ''
							this.getList(this.id)
							this.getMore(this.dto.pid)
						})
				}

			},
			// 删除上传照片
			del(item) {
				// this.getList()
				console.log(item, '0000000');
				this.$api.get(`/api/introdution/delIntrodution?id=${item.id}&publisherId=${item.publisherId}`)
					.then(res => {
						console.log('删除', res)
						this.getList()
					})
			},
			// 点赞
			like(item) {
				// this.showInputBox = true
				let list = {
					id: item.id,
					type: item.publisherType
				}
				this.$api.get('/api/introdution/Like', list).then(res => {
					// console.log('// 点赞likenum', res)
					this.getList(this.id)
					this.$showToast(res.data.data)
				})
			},

			onTap(item) {
				uni.navigateTo({
					url: '/pages/index/waterfall/details?id=' + item.id
				})
			},
			// 切换游记攻略
			changeTab(e) {
				this.yfzxact = e.index;
				// this.fromData.type = e
				this.fromData.type = 5

				this.getList()
			},
			// 发布
			publishStrategy() {
				// // 发布攻略
				// if (this.fromData.type == 5) {
				// 	console.log('00000000');
				// 	// 游记页面
				uni.navigateTo({
					url: '/pagesMy/publish/publishStrategy/publishStrategy?type=' + this.fromData.type
				})
				// } else if (this.fromData.type == 6) {
				// 	console.log('1111111');
				// 攻略页面
				// uni.navigateTo({
				// 	url: '/pagesMy/publish/publishTravelNotes/publishTravelNotes?type=' + this.fromData.type
				// })
				// }
			},

			getList() {
				// if (this.fromData.type == 5) {
				// 	console.log('00000000');
				// 	// 游记页面
				this.$api.get('/api/introdution/MyTripList', this.fromData).then(res => {
					// console.log(res);
					this.List = res.data.data
				})
				// } else if (this.fromData.type == 6) {
				// console.log('1111111');
				// 攻略页面
				// this.$api.get('/api/introdution/MyTripList', this.fromData).then(res => {
				// 	console.log(res);
				// 	this.List = res.data.data
				// })
				// }

			},

			// 去详情页面 
			TapComments(item, index) {
				if (item.type == 1) { //议事广场
					let obj = {
						id: item.commId,
						title: '议事广场'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (item.type == 2) { //文化休闲
					let obj = {
						id: item.commId,
						title: '文化休闲'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/cultureDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (item.type == 3) { //文化休闲
					let obj = {
						id: item.commId,
						title: '兴趣课程'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/interestDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (item.type == 4) { //趣味活动

					uni.navigateTo({
						url: '/pagesService/funActivity/detailActivity?id=' + item.commId
					})
				}
				if (item.type == 5) { //攻略
					uni.navigateTo({
						url: '/pages/index/waterfall/details?id=' + item.commId
					})
				}
				if (item.type == 6) { //游记
					uni.navigateTo({
						url: '/pages/index/waterfall/details?id=' + item.commId
					})
				}
				if (item.type == 7) { //新闻资讯
					uni.navigateTo({
						url: '/pagesService/news/newsDetails?id=' + item.commId
					})
				}
				if (item.type == 8) { //就诊资讯
					uni.navigateTo({
						url: '/pagesService/news/newsDetails?id=' + item.commId
					})
				}
				if (item.type == 9) { //社区互动
					let obj = {
						id: item.commId,
						title: '社区互动'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails2?obj=' + JSON.stringify(obj)
					})
				}
			},
			// 长按时间
			TapAndHold(item, index) {
				this.show = true
				this.item = item

			},
			// 删除
			deled() {
				this.show = false
				this.showModal = true
				this.$api.get(
					`/api/introdution/delComment?commentId=${this.item.id}&publisherId=${this.item.commentatorId}&commentatorId=${this.item.commentatorId}`
				).then(res => {
					if (res.data.code == 0) {
						this.$showToast(res.data.data)
						setTimeout(() => {
							this.getListed()
							this.getList(this.commId)
						}, 1000)


					} else this.$showModal(res.data.msg)

				})
			},
			open() {},
			close() {
				this.show = false
			},
			showVal() {
				this.showValues = false
			},
			// 评论区二级评论
			discussChildren(e, i) {
				console.log(e, i);
				this.commit = true
				this.showValues = true
				this.dto.pid = e.id // 父id
				// this.dto.commentPid = e.id //评论父id
				this.dto.commentPid = e.commentPid //评论父id
				this.dto.pname = e.commentatorName
				this.dto.revieweeId = e.creator //被评论人 id
				this.dto.type = e.type //类型
				this.dto.commId = e.commId
				this.dto.tripId = e.commId
				this.dto.publisherId = e.publisherId
				// this.dto.commid = e.id //

			},

			// 评论区评论接口调用
			submit(val) {
				if (val !== '') {
					this.dto.content = val
					this.$api.post('/api/introdution/comment',
						this.dto
					).then(res => {
						if (res.data.code == 0) {
							this.$showToast('回复成功')
							this.commit = false
							setTimeout(() => {
								this.getList(this.commId)
							}, 1000)
						}
					})
				} else {
					this.commit = false
				}
			},

			// 获取详情数据
			getListed() {
				this.$api.get('/api/myComment/getMyComments', this.fromData)
					.then(res => {
						console.log(res, '----');
						// this.introdutionId = res.data.data.id
						this.searchList = res.data.data;
						this.searchList.forEach(item => {
							// this.commentsType = item.type
							if (item.type == 1) {
								this.commentsType = '议事广场'
							}
							if (item.type == 2) {
								this.commentsType = '文化休闲'
							}
							if (item.type == 3) {
								this.commentsType = '兴趣课程'
							}

							if (item.type == 4) {
								this.commentsType = '趣味活动'
							}
							if (item.type == 5) {
								this.commentsType = '攻略'
							}
							if (item.type == 6) {
								this.commentsType = '游记'
							}
							if (item.type == 7) {
								this.commentsType = '新闻资讯'
							}
							if (item.type == 8) {
								this.commentsType = '就诊资讯'
							}
							if (item.type == 9) {
								this.commentsType = '社区互动'
							}
						})

					})
			},

		}
	}
</script>

<style lang="scss">
	.u-tabs__wrapper__nav__line {
		left: 35rpx !important;
		height: 6rpx !important;
		width: 80rpx !important;
	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			// padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.tabs>view {
		width: 50% !important;
	}

	.u-moreList {
		width: 60% !important;
	}

	// .input-box {
	// 	width: ;
	// }

	.u-badge {
		padding: 0 !important;
		background-color: #FFFFFF !important;
		margin-left: -14rpx;
		color: #666666 !important;
		margin-top: 5rpx;
	}

	.u-input__content__field-wrapper__field {
		font-size: 24rpx;
		margin-left: 30rpx;
	}

	.u-modal__content__text {
		text-align: center !important;
	}

	.u-input__content {
		padding: 18rpx !important;
	}
</style>

<style lang="less" scoped>
	.btns {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;
		left: 0;
		display: flex;
		padding: 32rpx 32rpx 50rpx;
		background-color: #fff;
		gap: 0 20rpx;
		box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);


		&>view {
			width: 100%;
			height: 80rpx;
			border-radius: 46rpx;
			// border: 1rpx solid #999999;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: Bold;
			color: #111111;
			background-color: #F6F6F6;
		}
	}

	.position-image {
		position: fixed;
		bottom: 200rpx;
		right: 0;

		.image-two {
			width: 148rpx;
			height: 148rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.page {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		height: 100vh;

		// padding-top: 130rpx;
	}

	.pop-center {
		// padding: 24rpx 24rpx 190rpx;
	}

	.comments {
		border-bottom: 1rpx solid #EFEFEF;

		.one-list {
			display: flex;

			.image {
				// margin-top: -10rpx;
				margin: 20rpx;
				width: 64rpx;
				height: 64rpx;
				border-radius: 50rpx;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50rpx;
				}
			}

			.text {
				.center-title {
					margin-top: 26rpx;
					color: #111111;
					font-size: 28rpx;
					font-weight: bold;

				}

				.center-text {
					width: 580rpx;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					color: #333333;
					font-size: 28rpx;
					font-weight: Regular;
					margin: 20rpx 0;
				}

				.center-text1 {
					color: #808080;
					font-size: 28rpx;
					font-weight: Regular;
					width: 580rpx;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;

					display: flex;
					align-items: center;

					.text {
						display: block;
						width: 8rpx;
						height: 30rpx;
						background-color: #E6E6E6;
						margin-right: 10rpx;
						border-radius: 2rpx;

					}

				}

				.center-time {
					font-size: 24rpx;
					color: #333333;
					font-weight: Regular;
					margin-top: 10rpx;

				}

				.center-time1 {
					font-size: 28rpx;
					color: #808080;
					font-weight: Regular;
				}

				.center-Reply {
					margin: 26rpx 0 32rpx;
					// width: ;
					display: flex;
					align-items: center;
					width: 124rpx;
					height: 64rpx;
					text-align: center;
					color: #333333;
					font-size: 24rpx;
					font-weight: Regular;
					border-radius: 50rpx;
					background-color: #F4F4F5;

					:nth-child(1) {
						margin: 0 auto;
						display: flex;
						align-items: center;
					}


				}

			}
		}


	}


	.pop-input {
		margin: 0 auto;
		padding: 0 30rpx;
		background: #f5f8fa;
		width: 330rpx;
		height: 72rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		// position: relative;

		text {
			font-size: 24rpx;
			color: #AAAAAA;
		}

	}

	.pop-input-if {
		background-color: #fff;
		box-sizing: border-box;
		width: 100vw;
		height: 150rpx;
		line-height: 150rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx;

		.ipt {
			width: 78%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background: #eeeeee;


		}

		.btn {
			margin-left: 24rpx;
			width: 124rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background: #33AFFC;
			font-size: 28rpx;
			color: #FFFFFF;
			font-weight: Regular;
			text-align: center;
		}

	}

	.pop {
		// display: flex;
		// height: 408rpx;
		border-radius: 24rpx 24rpx 0 0;
		font-size: 32rpx;
		font-weight: 600;
		color: #111111;
		text-align: center;
		background-color: #FAFAFA;

		.one {
			padding-top: 10rpx;
			border-radius: 24rpx 24rpx 0 0;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			margin-bottom: 6rpx;
		}


		.two {
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
		}

		.three {
			margin-top: 20rpx;
			height: 140rpx;
			line-height: 100rpx;
			background-color: #fff;
		}
	}
</style>

<style lang="less">
	.page {
		width: 100vw;
		height: 100%;
		box-sizing: border-box;
		// padding-top: 120rpx;
	}

	.hander {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		width: 100vw;
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 0.5rpx solid #EFEFEF;
	}

	.content-list {
		padding-top: 40rpx;
		padding-bottom: 200rpx;
		// background-color: #f0f2f5;
		width: 100vw;

		// height: 80vh;
		// height: 100%;
		// padding-bottom: 200rpx;
		// padding: 24rpx;
		// box-sizing: border-box;
		.del {
			width: 194rpx;
			height: 194rpx;
			background: #FF4141;
			color: #FFFFFF;
			font-size: 28rpx
		}

		.card {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			// margin: 24rpx 0;
			border-radius: 16rpx;
			padding: 24rpx;
			// border-bottom: 1rpx solid #EFEFEF;

			.image {
				width: 194rpx;
				height: 194rpx;
				border-radius: 16rpx;
				position: relative;

				.text {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 22rpx;
					color: #ffffff;
					// background: #ff7d01;
					// background-color: argb(0, 0, 0, 0.5);
					// background: argb(0, 0, 0, 0.5);
					background: rgba(0, 0, 0, 0.5);

					border-radius: 16rpx 0 18rpx 0;
					padding: 4rpx 6rpx;
				}
			}

			.left-text {
				// width: 484rpx;
				width: 510rpx;
				height: 194rpx;
				box-sizing: border-box;
				padding: 0 24rpx;
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: space-between;

				.title {
					// width: 484rpx;
					// height: 50rpx;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					/* 显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

				.icon {
					margin-top: 100rpx;
					// margin: 0 32rpx;
					// width: 340rpx;
					// height: 102rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text-align: center;

					.box {
						// flex: 1;

						display: flex;
						width: 120rpx;

						.u-icon__icon {
							width: 60rpx !important;
							height: 60rpx !important;
							color: #111111 !important;
						}
					}

				}
			}


		}

	}

	.u-badge {
		line-height: 50rpx !important;
		color: #666666 !important;
	}

	.content {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70vh;
		text-align: center;

		.no_img {
			width: 220rpx;
			height: 150rpx;
		}

		.image {
			width: 320rpx;
			height: 250rpx;
		}

		.share {
			font-size: 32rpx;
			color: #808080;
		}

		.image-two {
			margin-bottom: -340rpx;
			width: 168rpx;
			height: 168rpx;
		}


	}

	.active {
		font-size: 36rpx !important;
		color: #111111 !important;
		// border-bottom: 1rpx solid #0fc2f6;
	}



	.data-v-0d5b1156 {
		width: 100vw !important;
	}
</style>